<template>

  <div class="app-container">

    <el-row>
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <el-form :inline="true" :model="queryForm" class="demo-form-inline">
            <el-form-item label="">
              <el-input v-model="queryForm.keywords" placeholder="请输入关键字(账号/手机号/姓名/所属单位)." style="width: 18.75rem;" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" :loading="loading" @click="onQuerySubmit">查询
              </el-button>
              <el-button type="info" icon="el-icon-refresh" size="mini" :loading="loading" @click="onReset">重置
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple-light" style="text-align: right;">
          <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" :loading="loading">新建客户
          </el-button>
        </div>
      </el-col>
    </el-row>
    <el-table :data="tableData" border empty-text="暂无数据." style="width: 100%">
      <el-table-column type="index" label="序号" width="50" align="center" :index="indexMethod">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180">
      </el-table-column>

      <el-table-column prop="phone" label="手机号" width="180">
      </el-table-column>

      <el-table-column prop="orgName" label="单位">
      </el-table-column>

      <el-table-column prop="createTime" label="注册时间" width="180">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime | dateFormat}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="createTime" label="有效期" width="180">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime | dateFormat}}</span>
        </template>
      </el-table-column>


     <!-- <el-table-column prop="lockFlag" label="等级" width="100" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.lockFlag='0' ">普通客户</el-tag>
          <el-tag v-else type="danger">锁定</el-tag>
        </template>
      </el-table-column> -->


      <el-table-column prop="lockFlag" label="状态" width="80" align="center">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.lockFlag" active-value="0" active-color="#13ce66" inactive-color="#ff4949"
            inactive-value="1" @change="changeSwitch(scope.row)">
          </el-switch>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="left" fixed="right">
        <template slot-scope="scope">
          <el-button v-if="scope.row.username !='admin' " type="text" size="small" @click="handleEdit(scope.row)">编辑
          </el-button>
          <el-button v-if="scope.row.username !='admin' " type="text" size="small" @click="handleDelete(scope.row)">场景
          </el-button>
          <el-button v-if="scope.row.username !='admin' " type="text" size="small" @click="handleDelete(scope.row)">项目
          </el-button>
          <el-button v-if="scope.row.username !='admin' " type="text" size="small" @click="handleDelete(scope.row)">删除
          </el-button>
          <el-button v-if="scope.row.username !='admin' " type="text" size="small" @click="handleSubAccount(scope.row)">
            子账号
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-row>
      <el-col :span="24">
        <div align="right" style="margin-top: 0.3125rem;">
          <el-pagination background layout="prev, pager, next" :current-page="page.cur" :page-size="page.limit"
            :total="page.total" @current-change="handleCurrentChange" />
        </div>
      </el-col>
    </el-row>

    <!--编辑框-->
    <info-dialog v-if="editDialog.visible" :properties="editDialog" @closed="close" @refresh="load" />

    <!--编辑框-->
    <sub-account-drawer v-if="subAccountDrawer.visible" :properties="subAccountDrawer" @closed="close"
      @refresh="load" />



  </div>
</template>

<script>
  import InfoDialog from './components/InfoDialog.vue'

  import SubAccountDrawer from './components/SubAccountDrawer.vue'


  import {
    hasPermission
  } from '@/utils/permission'
  import {
    findUserList,
    saveUser,
    updateUser,
    deleteUser
  } from '@/api/system/user'
  import {
    isOk
  } from '@/utils/request'
  export default {
    name: 'User',
    components: {
      InfoDialog,
      SubAccountDrawer
    },
    data() {
      return {
        loading: false,
        queryForm: {
          keywords: undefined,
          status: '',
          orgId: ''
        },
        page: {
          cur: 1,
          limit: 50,
          total: 0
        },
        tableData: [],
        editDialog: {
          visible: false,
          type: '0',
          data: {}
        },
        subAccountDrawer: {
          visible: false,
          type: '0',
          data: {}
        }
      }
    },
    created() {
      this.load();
    },
    methods: {
      indexMethod(index) {
        return index + 1;
      },
      onQuerySubmit(event) {
        this.load()
      },
      onReset(event) {
        this.queryForm.keywords = undefined;
        this.queryForm.status = '';
        this.load()
      },
      load() {
        this.loading = true
        findUserList({
            cur: this.page.cur,
            limit: this.page.limit,
            keywords: this.queryForm.keywords,
            orgId: this.queryForm.orgId,
            status: this.queryForm.status
          }).then(rsp => {
            if (isOk(rsp)) {
              const _data = rsp.result.list
              this.page.total = rsp.result.totalRow
              this.tableData = _data
              this.loading = false
            }
          }).catch(err => {
            console.log(err);
          })
          .finally(() => {
            this.loading = false
          })
      },
      handleCurrentChange(cur) {
        this.page.cur = cur
        this.load()
      },
      handleAdd: function(e) {
        this.editDialog.visible = true
        this.editDialog.type = '0'
      },
      handleEdit: function(data) {
        this.editDialog.visible = true
        this.editDialog.type = '1'
        this.editDialog.data = data
      },
      handleSubAccount: function(data) {
        this.subAccountDrawer.visible = true
        this.subAccountDrawer.type = '1'
        this.subAccountDrawer.data = data
      },
      close: function(e) {
        this.editDialog.visible = false
        this.editDialog.data = {}

        this.subAccountDrawer.visible = false
        this.subAccountDrawer.data = {}
        this.load()
      },
      handleDelete: function(data) {
        this.$confirm('确认删除【' + data.name + '】吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading = true
          deleteUser({
              id: data.id
            }).then(response => {
              this.$message({
                message: '删除成功',
                type: 'success',
                duration: 500
              })
              this.load()
            }).catch(err => {
              console.log(err);
            })
            .finally(() => {
              this.loading = false
            })
        })
      },
      changeSwitch(data) {
        updateUser({
            id: data.id,
            lockFlag: data.lockFlag
          }).then(response => {
            /* this.$message({
              message: '删除成功',
              type: 'success',
              duration: 500
            }) */
            this.load()
          }).catch(err => {
            console.log(err);
          })
          .finally(() => {
            this.loading = false
          })
      }
    }
  }
</script>
